<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON配置生成器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            opacity: 0.9;
            font-size: 1.1em;
        }

        .content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
            min-height: 600px;
        }

        .editor-panel {
            padding: 30px;
            border-right: 1px solid #e0e0e0;
            overflow-y: auto;
            max-height: 70vh;
        }

        .preview-panel {
            padding: 30px;
            background: #f8f9fa;
            overflow-y: auto;
            max-height: 70vh;
        }

        .section-title {
            font-size: 1.3em;
            font-weight: 600;
            margin-bottom: 20px;
            color: #333;
        }

        .config-item {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 15px;
            position: relative;
            transition: all 0.3s ease;
        }

        .config-item:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .item-title {
            font-weight: 600;
            color: #555;
        }

        .remove-btn {
            background: #ff4757;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.9em;
            transition: background 0.3s;
        }

        .remove-btn:hover {
            background: #ff3742;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #555;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1em;
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 80px;
            font-family: 'Consolas', 'Monaco', monospace;
        }

        .add-btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            margin-right: 10px;
            margin-bottom: 10px;
            transition: background 0.3s;
        }

        .add-btn:hover {
            background: #5a6fd8;
        }

        .download-btn {
            background: #2ed573;
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.1em;
            font-weight: 600;
            margin-top: 20px;
            transition: background 0.3s;
            display: block;
            width: 100%;
        }

        .download-btn:hover {
            background: #26d466;
        }

        .json-preview {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 10px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 0.9em;
            line-height: 1.5;
            white-space: pre-wrap;
            word-break: break-all;
            max-height: 500px;
            overflow-y: auto;
        }

        .json-key {
            color: #90cdf4;
        }

        .json-string {
            color: #68d391;
        }

        .json-number {
            color: #fbb6ce;
        }

        .json-boolean {
            color: #f6ad55;
        }

        .json-null {
            color: #a0aec0;
        }

        .nested-config {
            margin-left: 20px;
            border-left: 2px solid #e0e0e0;
            padding-left: 20px;
        }

        .array-item {
            background: #f7fafc;
            border: 1px dashed #cbd5e0;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 10px;
        }

        @media (max-width: 768px) {
            .content {
                grid-template-columns: 1fr;
            }
            
            .editor-panel,
            .preview-panel {
                max-height: none;
            }
        }

        .empty-state {
            text-align: center;
            color: #666;
            padding: 40px;
        }

        .empty-state i {
            font-size: 3em;
            margin-bottom: 15px;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>JSON配置生成器</h1>
            <p>轻松创建、编辑和下载JSON配置文件</p>
        </div>
        
        <div class="content">
            <div class="editor-panel">
                <h2 class="section-title">配置编辑器</h2>
                
                <div class="action-buttons">
                    <button class="add-btn" onclick="addConfigItem('string')">添加字符串</button>
                    <button class="add-btn" onclick="addConfigItem('number')">添加数字</button>
                    <button class="add-btn" onclick="addConfigItem('boolean')">添加布尔值</button>
                    <button class="add-btn" onclick="addConfigItem('array')">添加数组</button>
                    <button class="add-btn" onclick="addConfigItem('object')">添加对象</button>
                </div>

                <div id="configList">
                    <div class="empty-state">
                        <i>📋</i>
                        <p>点击上方按钮开始添加配置项</p>
                    </div>
                </div>
            </div>

            <div class="preview-panel">
                <h2 class="section-title">JSON预览</h2>
                <div id="jsonPreview" class="json-preview">{}</div>
                <button class="download-btn" onclick="downloadJSON()">
                    <i>💾</i> 下载 JSON 文件
                </button>
            </div>
        </div>
    </div>

    <script>
        let configData = {};
        let itemCounter = 0;

        function addConfigItem(type) {
            const configList = document.getElementById('configList');
            
            // 移除空状态提示
            const emptyState = configList.querySelector('.empty-state');
            if (emptyState) {
                emptyState.remove();
            }

            const itemId = `item_${itemCounter++}`;
            const itemDiv = document.createElement('div');
            itemDiv.className = 'config-item';
            itemDiv.id = itemId;
            itemDiv.dataset.type = type;

            let content = '';

            switch(type) {
                case 'string':
                    content = `
                        <div class="item-header">
                            <span class="item-title">字符串配置</span>
                            <button class="remove-btn" onclick="removeItem('${itemId}')">删除</button>
                        </div>
                        <div class="form-group">
                            <label>键名</label>
                            <input type="text" placeholder="输入键名" onchange="updateJSON()">
                        </div>
                        <div class="form-group">
                            <label>值</label>
                            <input type="text" placeholder="输入字符串值" onchange="updateJSON()">
                        </div>
                    `;
                    break;

                case 'number':
                    content = `
                        <div class="item-header">
                            <span class="item-title">数字配置</span>
                            <button class="remove-btn" onclick="removeItem('${itemId}')">删除</button>
                        </div>
                        <div class="form-group">
                            <label>键名</label>
                            <input type="text" placeholder="输入键名" onchange="updateJSON()">
                        </div>
                        <div class="form-group">
                            <label>值</label>
                            <input type="number" placeholder="输入数字" onchange="updateJSON()">
                        </div>
                    `;
                    break;

                case 'boolean':
                    content = `
                        <div class="item-header">
                            <span class="item-title">布尔值配置</span>
                            <button class="remove-btn" onclick="removeItem('${itemId}')">删除</button>
                        </div>
                        <div class="form-group">
                            <label>键名</label>
                            <input type="text" placeholder="输入键名" onchange="updateJSON()">
                        </div>
                        <div class="form-group">
                            <label>值</label>
                            <select onchange="updateJSON()">
                                <option value="true">true</option>
                                <option value="false">false</option>
                            </select>
                        </div>
                    `;
                    break;

                case 'array':
                    content = `
                        <div class="item-header">
                            <span class="item-title">数组配置</span>
                            <button class="remove-btn" onclick="removeItem('${itemId}')">删除</button>
                        </div>
                        <div class="form-group">
                            <label>键名</label>
                            <input type="text" placeholder="输入键名" onchange="updateJSON()">
                        </div>
                        <div class="form-group">
                            <label>数组元素 (每行一个)</label>
                            <textarea placeholder="输入数组元素，每行一个" onchange="updateJSON()"></textarea>
                        </div>
                    `;
                    break;

                case 'object':
                    content = `
                        <div class="item-header">
                            <span class="item-title">对象配置</span>
                            <button class="remove-btn" onclick="removeItem('${itemId}')">删除</button>
                        </div>
                        <div class="form-group">
                            <label>键名</label>
                            <input type="text" placeholder="输入键名" onchange="updateJSON()">
                        </div>
                        <div class="form-group">
                            <label>对象内容 (JSON格式)</label>
                            <textarea placeholder='{"key": "value"}' onchange="updateJSON()"></textarea>
                        </div>
                    `;
                    break;
            }

            itemDiv.innerHTML = content;
            configList.appendChild(itemDiv);
            updateJSON();
        }

        function removeItem(itemId) {
            const item = document.getElementById(itemId);
            if (item) {
                item.remove();
                updateJSON();
                
                // 检查是否所有项都被删除
                const configList = document.getElementById('configList');
                if (configList.children.length === 0) {
                    configList.innerHTML = `
                        <div class="empty-state">
                            <i>📋</i>
                            <p>点击上方按钮开始添加配置项</p>
                        </div>
                    `;
                }
            }
        }

        function updateJSON() {
            const configList = document.getElementById('configList');
            const items = configList.querySelectorAll('.config-item');
            const newConfig = {};

            items.forEach(item => {
                const inputs = item.querySelectorAll('input, select, textarea');
                const key = inputs[0]?.value;
                
                if (!key) return;

                const type = item.dataset.type;
                let value;

                switch(type) {
                    case 'string':
                        value = inputs[1]?.value || '';
                        break;
                    case 'number':
                        value = parseFloat(inputs[1]?.value) || 0;
                        break;
                    case 'boolean':
                        value = inputs[1]?.value === 'true';
                        break;
                    case 'array':
                        const arrayText = inputs[1]?.value || '';
                        value = arrayText.split('\n').filter(line => line.trim() !== '');
                        break;
                    case 'object':
                        const objectText = inputs[1]?.value || '{}';
                        try {
                            value = JSON.parse(objectText);
                        } catch (e) {
                            value = {};
                        }
                        break;
                }

                newConfig[key] = value;
            });

            configData = newConfig;
            updatePreview();
        }

        function updatePreview() {
            const preview = document.getElementById('jsonPreview');
            const jsonString = JSON.stringify(configData, null, 2);
            
            // 添加语法高亮
            const highlighted = jsonString
                .replace(/"([^"]+)":/g, '<span class="json-key">"$1"</span>:')
                .replace(/: "([^"]*)"/g, ': <span class="json-string">"$1"</span>')
                .replace(/: (-?\d+\.?\d*)/g, ': <span class="json-number">$1</span>')
                .replace(/: (true|false)/g, ': <span class="json-boolean">$1</span>')
                .replace(/: null/g, ': <span class="json-null">null</span>');
            
            preview.innerHTML = highlighted || '{}';
        }

        function downloadJSON() {
            const jsonString = JSON.stringify(configData, null, 2);
            const blob = new Blob([jsonString], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            
            const a = document.createElement('a');
            a.href = url;
            a.download = 'config.json';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }

        // 初始化
        updateJSON();
    </script>
</body>
</html>